<template>
	<view>
		<view class="text">
			<view class="t_top">
				<text>全部接受，方可继续购买</text>
			</view>
			<view class="gay">
				<text>
					根据民生银行要求，购买黄金产品前需确认如下条款，请您仔细阅读，并确认接受。
				</text>
			</view>
			<view class="balck" v-for="item in checkData" :key='item.id'>
				<label class="label">
					<view style="vertical-align: middle;"><text>{{item.text}}</text></view>
					<checkbox color="#3476f1" :value="item.id" style="vertical-align: middle;" :checked="item.sta" />
				</label>
			</view>
		</view>
		<view class="bottom">
			<view class="bot_top" @tap='no'><text>不接受</text></view>
			<view class="bot_bottom" @tap='yes'><text>全部接受</text></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checkData:[
					{id:1,text:'积存金产品是实盘交易，非保证金交易。',sta:false},
					{id:2,text:'积存金可以通过预约提货申请到银行指定网点柜面兑换成实物金产品。',sta:false},
					{id:3,text:'在银行柜面兑换实物金产品时，需要以现金形式支付提取手续费。',sta:false},
					{id:4,text:'可以按照民生积存金报价卖出黄金账户内的黄金份额。',sta:false},
					{id:5,text:'积存金产品不保证最低收益，也不保证不会发生本金亏损。',sta:false}
				]
			}
		},
		methods: {
			yes(){
				this.checkData.forEach(item=>{
					item.sta=true
				})
			},
			no(){
				this.checkData.forEach(item=>{
					item.sta=false
				})
			}
		}
	}
</script>

<style scoped>
	.text{
		width: 702rpx;
		margin: 0 24rpx;
	}
	.t_top{
			font-size: 32rpx;
			color: #333333;
			margin-top: 70rpx;
	}
	.gay{
		margin-top: 50rpx;
		margin-bottom: 102rpx;
		font-size: 24rpx;
		color: #999999;
		line-height: 36rpx;
	}
	.balck{
		font-size: 24rpx;
		color: #333333;
		border-bottom: 1rpx solid #dddddd;
		align-items: center;
		vertical-align: middle;
	}
	.label{
		margin:30rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.bottom{
		display: flex;
		justify-content: space-between;
		margin-top: 410rpx;
	}
	.bot_top{
		width: 240rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		background-color: #f3f3f3;
		color: #999999;
		font-weight: bold;
	}
	.bot_bottom{
		font-weight: bold;
		background-color: #3476f1;
		width: 510rpx;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		color: #ffffff;
	}
</style>
